<template>
  <div class="Category">
    <search-bar />

    <section class="category-wrap" ref="categoryWrap">
      <!-- 左侧分类导航 -->
      <div class="nav-side-wrapper" ref="sidewrapper">
        <ul class="nav-side">
          <li v-for="(item,index) in categoryData" :key="index" :class="{'active':currentIndex===index}" @click="selectMenu(index)">
            {{item.name}}
          </li>
        </ul>
      </div>

      <!-- 右侧商品数据 -->
      <div class="content-wrapper" ref="contentwrapper">
        <div class="content-slide" v-for="(item,index) in categoryList" :key="index">
          <img :src="item.mainImgUrl" class="category-main-img" />
          <div class="category-list" v-for="(category,index) in item.list" :key="index">
            <p class="catogory-title">{{category.title}}</p>
            <div class="product-item" v-for="(product,index) in category.productList" :key="index">
              <img :src="product.imgUrl" class="product-img">
              <p class="product-title">{{product.title}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部导航栏 -->
    <tabbar :active="1" />
  </div>
</template>

<script>
import searchBar from "../../components/searchBar.vue";
import tabbar from "../../components/tabbar.vue";
import { getcategoryData } from "../../api/index";

// 区域滚动
import BScroll from "better-scroll";

export default {
  components: {
    searchBar,
    tabbar
  },
  data: function () {
    return {
      currentIndex: 0,
      categoryData: []
    }
  },
  methods: {
    // 固定父容器高度
    setSearchWrapHeight() {
      let $screenHeight = document.documentElement.clientHeight
      // 设置内容盒子高度为屏幕高-100px
      this.$refs.categoryWrap.style.height = $screenHeight - 100 + 'px'
    },
    // 获取分类页数据
    fetchCategory() {
      getcategoryData().then(res => {
        this.categoryData = res;

        this.$nextTick(() => {
          // mouseWheel: true,//开启鼠标滚轮
          //   disableMouse: false,//启用鼠标拖动
          //     disableTouch: false//启用手指触摸

          // 设置左侧导航区域滚动
          new BScroll(this.$refs.sidewrapper, { freeScroll: true, probeType: 3, disableTouch: false });
          // 设置右侧商品区域滚动
          new BScroll(this.$refs.contentwrapper, { freeScroll: true, probeType: 3, disableTouch: false });
        });
      })
    },
    // 点击菜单
    selectMenu(index) {
      this.currentIndex = index;
      this.$nextTick(() => {
        // 设置左侧导航区域滚动
        new BScroll(this.$refs.sidewrapper, { freeScroll: true, probeType: 3, disableTouch: false });
        // 设置右侧商品区域滚动
        new BScroll(this.$refs.contentwrapper, { freeScroll: true, probeType: 3, disableTouch: false });
      });
    }
  },
  computed: {
    // 导航联动
    categoryList() {
      return this.categoryData.filter((v, i) => this.currentIndex == i)
    }
  },
  mounted() {
    // 固定父容器高度
    this.setSearchWrapHeight();
    // 获取分类页数据
    this.fetchCategory();

    this.$nextTick(() => {
      // 设置左侧导航区域滚动
      new BScroll(this.$refs.sidewrapper, { freeScroll: true, probeType: 3, disableTouch: false });
    })
  }
}

</script>

<style lang="scss" scoped>
@import "../../common/style/mixin.scss";

// 左侧商品
.category-wrap {
  @include fj;
  width: 100%;
  margin-bottom: 50px;
  background: #f8f8f8;
  overflow: hidden;

  .nav-side-wrapper {
    width: 30%;
    height: 100%;
    overflow: hidden;

    .nav-side {
      width: 100%;
      @include boxSizing;
      background: #f8f8f8;

      li {
        width: 100%;
        height: 92px;
        text-align: center;
        line-height: 92px;
        font-size: 28px;

        // background-color: pink;

        &.active {
          color: $red;
          background: #fff;
        }
      }
    }
  }
}

// 右侧商品
.content-wrapper {
  width: 70%;
  height: 100%;
  overflow: hidden;

  .content-slide {
    width: 100%;
    padding: 0 20px;
    background: #fff;
    @include boxSizing;

    .category-main-img {
      width: 100%;
    }

    .category-list {
      display: flex;
      flex-wrap: wrap;
      flex-shrink: 0;
      width: 100%;

      .catogory-title {
        width: 100%;
        font-size: 34px;
        font-weight: 500;
        padding: 40px 0;
      }

      .product-item {
        width: 33.3333%;
        margin-bottom: 20px;
        text-align: center;
        font-size: 30px;

        img {
          width: 100%;
        }
      }
    }
  }
}
</style>